<template>
  <div>
    <q-input
      dense
      outlined
      v-model.lazy="myURL"
    >
      <template v-slot:after>
        <q-btn
          dense
          unelevated
          color="primary"
          label="选择"
          @click="onClick"
        />
      </template>
    </q-input>

    <q-dialog class="my-dialog" v-model="isFlagShow" @mousedown.stop>
      <q-card class="my-card q-mx-lg">
        <q-toolbar class="row items-center my-form-header">
          <div>
            {{dlgTitle}}
          </div>
          <q-space />
          <q-btn
            flat
            round
            dense
            icon="mdi-close"
            @click="onClose"
          />
        </q-toolbar>
        <q-separator />
        <q-card-setion class="q-mx-sm">
          <div class="col q-gutter-xs my-form-container">
            <q-item class="items-center">
              <q-item-label>图片分类：</q-item-label>
              <q-item-section>
                <q-select
                  dense
                  outlined
                  options-dense
                  clearable
                  :options="imageTypeOptions"
                  v-model="myImageType"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @update:model-value="onImageTypeRefresh(myImageType)"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label>图片选择：</q-item-label>
              <q-item-section>
                <q-select
                  class="my-select-box"
                  dense
                  outlined
                  options-dense
                  clearable
                  :options="imageOptions"
                  v-model="myImage"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @update:model-value="onImageRefresh(myImage)"
                >
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section>
                      <q-avatar rounded size="md">
                        <img :src="scope.opt.label" alt="">
                      </q-avatar>
                    </q-item-section>
                  </q-item>
                </template>
                </q-select>
              </q-item-section>
            </q-item>
          </div>
        </q-card-setion>
        <q-separator />
        <div class="q-gutter-sm my-form-footer">
          <q-btn
            unelevated
            dense
            label="确定"
            type="submit"
            color="teal-3"
            @click="onSubmit"
            style="width: 80px"
          />
        </div>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, computed, onMounted } from  'vue';
import api from 'axios'
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { sysBaseVOAPI, sysCatalogUrlAPI } from 'src/util/SysBaseConst';
import { cataItem } from 'src/hook/common/useCatalogType';


interface BoxItemVO {
  id: number,
  typeLabel: string,
  imgLabel: string
}

export default defineComponent({
  name: 'ImageSelectBox',
  props: {
    message: {
      type: String,
      default: () => {
        return '图像选择'
      }
    },

    url: {
      type: String,
      default: () => {
        return '';
      }
    }
  },

  emits: ['update:url'],
  setup (props, context) {
    //解构
    const {
      message,
      url
    } = toRefs(props)

    //消息通知
    const {
      showMessage
    } = useMessageNotify();

    //标题
    let dlgTitle = ref('图片选择');

    //定义响应数据
    let myURL = computed({
      get: () => {
        return url.value;
      },

      set: (sv: string) => {
        context.emit('update:url', sv);
      }
    });

    //选择按钮
    const onClick = () => {
      getAll();

      //读取项目信息
      getImageTypeList();
      isFlagShow.value = true;
    }

    //对话框显示
    let isFlagShow = ref(false);
    let myImageType = ref('请选择图片分类');
    let myImage = ref('请选择图片');

    //下拉列表框显示option
    let imageTypeOptions = ref<cataItem[]>([]);
    let imageOptions = ref<cataItem[]>([]);

    //根据label查找id
    const findIdByLabel = (list: cataItem[], name: string): number => {
      let index = list.findIndex((item) => (item.label === name));
      if (index !== -1) {
        return list[index].id;
      } else {
        return -1;
      }
    }

    //根据图形ID，读取图像名称、图像分类
    const getAll = () => {
      //读取变量信息
      if ((myURL.value) && (myURL.value !== '')) {
        api.post(sysBaseVOAPI.TUPLE_SEARCH_ITEM, { url: myURL.value }).then((res) => {
          if (res.data.message === 'Success') {
            let list: BoxItemVO[] = res.data.data;
            console.log(res.data.data);

            //图形分类名称和图像名称
            if (list.length > 0) {
              myImageType.value = list[0].typeLabel;
              myImage.value = list[0].imgLabel;
            }
          } else {
            showMessage(res.data.message);
          }
        }).catch((error) => {
          showMessage(error.message);
        });
      }
    }

    //读取项目信息
    const getImageTypeList = () => {
      api.post(sysCatalogUrlAPI.TUPLE_TYPE_CODE).then((res) => {
        if (res.data.message === 'Success') {
          imageTypeOptions.value.length = 0;
          let ls: cataItem[] = res.data.data;
          ls.forEach((item) => {
            imageTypeOptions.value.push(item);
          });

          //更新myImage
          let pid = findIdByLabel(imageTypeOptions.value, myImageType.value);
          getImageList(pid);
        }
      })
    }

    //读取设备信息
    const getImageList = (pid: number) => {
      if (pid > 0) {
        api.post(sysCatalogUrlAPI.TUPLE_SEARCH_LIST_API, { id: pid }).then((res) => {
          if (res.data.message === 'Success') {
            imageOptions.value.length = 0;
            let ls: cataItem[] = res.data.data;

            ls.forEach((item) => {
              imageOptions.value.push(item);
            });
          }
        })
      }
    }

    //图像类型变化，对应图像列表发生变化
    const onImageTypeRefresh = (v: string) => {
      let pid = findIdByLabel(imageTypeOptions.value, v);

      //图像类型变化，更新图像列表
      if (pid > 0) {
        //console.log(pid);
        getImageList(pid);
      }
    }

    //设备变化，对应变量列表发生变化
    const onImageRefresh = (v: string) => {
      myURL.value = v;
      console.log(myURL.value);
    }


    //关闭窗口
    const onClose = () => {
      isFlagShow.value = false;
    }

    //提交窗口
    const onSubmit = () => {
      isFlagShow.value = false;
    }

    //初始化
    const init = () => {

    }

    //组件挂载
    onMounted(() => {
      init();
    })

    return {
      message,
      dlgTitle,
      myURL,
      onClick,

      isFlagShow,
      myImageType,
      myImage,
      imageTypeOptions,
      imageOptions,
      onImageTypeRefresh,
      onImageRefresh,
      onClose,
      onSubmit,
      init
    };
  }
});

</script>

<style lang="scss" scoped>
  .my-dialog {
    .my-card {
      width: 370px;
      max-width: 600px;

      .my-form-header {
        background-color: #e3dede;
        font-size: 18px;
      }

      .my-form-container {
        text-align: center;
        padding: 10px;
        height: 250px;

        .my-select-box {
          max-width: 250px;
          overflow: hidden;  // 超出的文本隐藏
          text-overflow: ellipsis; // 溢出用省略号显示
        }
      }

      .my-form-footer {
        text-align: right;
        padding: 5px;
        background-color: #cecaca;
      }
    }
  }
</style>
